import { useState } from "react";

const PopWindow = ({ setIsPop, acterList }) => {
    const { avatar, cnm, enm, roleDetail, roles, still } = acterList;
    return (
        <div onClick={() => setIsPop(false)} style={{ height: "100%", width: "100vw", position: "absolute" }}>
            <div style={{ backgroundColor: "#00000030", position: "fixed", height: "100%", width: "100vw", zIndex: "5", top: "0", left: "0" }}>
            </div>
            <div style={{ margin: "30px ", color: "black", backgroundColor: "#ffffff", position: "fixed", zIndex: "10", left: "0", top: "100px", padding: "30px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minWidth: "70vw" }}>
                <img style={{ width: "150px", height: "200px" }} src={avatar} alt={cnm} />
                <p>中文名:{cnm}</p>
                <p>英文名:{enm}</p>
                <p>角色详情:{roleDetail}</p>
                <p>饰演角色:{roles}</p>
                <p>剧照:</p>
                <img style={{ width: "150px", height: "200px" }} src={still} alt={cnm} />
            </div>
        </div >

    );
};

const ActerCard = ({ acterList }) => {
    //解构演员数据
    const { cnm, desc, avatar, } = acterList;

    const [isPop, setIsPop] = useState(false);
    const handleClick = () => {
        setIsPop(true); // 打开弹窗
        console.log("点击了演员卡片"); // 调试用，实际应用中可以删除这行代码，或者替换为实际的逻辑实现
    };

    return (
        <div style={{ marginTop: "10px", display: "flex", flexDirection: "column", alignItems: "center", gap: "3px", minWidth: "160px" }}>

            <img onClick={handleClick} style={{ width: "150px", height: "200px" }} src={avatar} alt={cnm} />
            <p>{cnm}</p>
            <p style={{ color: "#999" }}>{desc}</p>
            {isPop && <PopWindow acterList={acterList} setIsPop={setIsPop} />}


        </div>
    );
};

export default ActerCard;
